<script setup lang="ts">
import {
  businessListShopItems,
  browseOrderLineItem,
  customerBrowseShopItem, customerDeleteOrder, customerPayOrder,
  getPrice,
  listShops
} from "../network/api.ts";
import {computed, reactive, ref} from "vue";
import Footer from "../components/BusinessFooter.vue";
import BusinessFooter from "../components/BusinessFooter.vue";
import CustommerFooter from "../components/CustommerFooter.vue";
import router from "../Router";
import {useRoute} from "vue-router";
import {CirclePlus, Minus, Plus} from "@element-plus/icons-vue";
const route = useRoute()

let username = ref()
let lineItemArr = ref();
let totalPrice = ref(0)
username.value = sessionStorage.getItem("username")
console.log(route.query.payStatus)
browseOrderLineItem(route.query.orderId).then(res=>{
  lineItemArr.value = res.data
  for(let i=0;i<lineItemArr.value.length;i++){
    getPrice(lineItemArr.value[i].shopId,lineItemArr.value[i].itemId).then(res=>{
      lineItemArr.value[i].price = res.data
      totalPrice.value += lineItemArr.value[i].quantity*res.data
    })
  }
  console.log(lineItemArr.value)

})

function toBack(){
  customerDeleteOrder(route.query.orderId).then(res=>{
    router.back()
  })

}
function toMyOrderPage(){
  customerPayOrder(
      sessionStorage.getItem("userId"),
      route.query.orderId).then(res=>{
    console.log("res.data.payStatus:",res.data.payStatus)
    router.push({
      path:"/customer/myOrder",
      query:{
        shopId:route.query.shopId
      }
    })
  })
}

</script>

<template>

  <header class="w-full title flex justify-center items-center bg-orange-3 border-orange-600 ">
    <div v-show="route.query.payStatus == 0"
        class="text-white select-none flex justify-center items-center gap-5">
      <p class="text-5vw">{{username}} 来</p>
      <h1>Pay an order</h1>
    </div>
    <div v-show="route.query.payStatus != 0"
         class="text-white select-none flex justify-center items-center gap-5">
      <p class="text-5vw">{{username}} 来</p>
      <h1>Browse an order</h1>
    </div>
  </header>
  <el-table :data="lineItemArr" height="100%" style="width:100% "
            class="select-none"
  >
    <el-table-column type="expand" width="25" style="margin-right: 3vw">
      <template #default="props">
        <p class="ml-5vw">创建时间: {{ props.row.createTime }}</p>
      </template>
    </el-table-column>
    <el-table-column type="index" width="1"/>
    <el-table-column  prop="itemName" label="item" width="120" align="center"/>
    <el-table-column  prop="shopName" label="shop" width="110" align="center"/>
    <el-table-column prop="price" label="价格/元" width="80" align="center"/>
    <el-table-column  prop="quantity" label="已选数量" width="55" align="center"/>
  </el-table>

  <div v-show="route.query.payStatus==0"
      class="text-gray fixed bottom-0 left-0 w-full h-18vw ml--2v  flex items-center select-none "
  >
    <button class="w-30% h-16.5vw flex flex-col justify-center items-center text-5vw  bg-white border-none font-light hover:border-orange-3 hover:border-2 hover:border-solid
                hover:text-orange-5"
         @click="toBack()"
    >
      <p>取消</p>
      <p class="text-2vw mt--4vw">(删除订单)</p>
    </button>
    <button class="bg-orange-3 w-70% flex justify-center items-center text-5vw text-white border-none
              hover:bg-orange-4  "
         @click="toMyOrderPage()"
    >
      <p>支付 </p>
      <p class="font-bold">&nbsp;{{totalPrice}}&nbsp;</p>
      <p>元</p>
    </button>
  </div>

  <div v-show="route.query.payStatus!= 0"
      class="gap-2vw grow h-10vw flex justify-end items-center font-light text-orange-6 text-5vw mt-3vw">
    <p>sum</p>
    <p class=" mr-5vw">{{totalPrice}}元</p>
  </div>
  <custommer-footer v-show="route.query.payStatus!= 0"></custommer-footer>

</template>

<style scoped>

</style>